<template>
    <div class="question">
        <el-container style="height: 100%; border: 1px solid #eee">
        <el-container>
            <el-header style="text-align: left; font-size: 12px; height: 48vh">
              <el-row style="">
               <el-col style="margin-left: 12px;" :span="3"
                       @click="searchByCategory(l,lCategory.problemCategoryId)"
                       v-for="(lCategory,l) in bigCategory" :key="l" >
                 <el-tag
                     :type="l===index? 'warning':'success' "
                     style="cursor: pointer"
                     round>
                   {{lCategory.problemCategoryName}}</el-tag>
               </el-col>
            </el-row>
            </el-header>
            <!-- 分类 -->
            <el-main>
            <el-card class="box-card">
              <!-- 搜索题号 -->
              <el-row>
                <el-col :span="10">
                    <Select @ChangeLevel="searchByTag"/>
                </el-col>

                <el-col :span="6">
                  <el-input v-model="searchContent" placeholder="请输入题号或者题目名" />
                  </el-col>
                <el-col :span="6">
                    <el-button type="primary" style="margin-left: 20px" round @click="search">搜索</el-button>
                  <el-button type="primary" style="margin-left: 20px" round @click="reset">重置</el-button>
                </el-col>

              <el-table
                ref="tableRef"
                :data="listData"
                style="width: 100%">
                <el-table-column
                  prop="problemId"
                  label="题号"
                  sortable
                  width="150"
                  column-key="date"
                >
                </el-table-column>
                <el-table-column
                  prop="problemName"
                  label="题目"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="problemCategories"
                  label="分类"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="problemTags"
                  label="难易"
                  width="150"
                  >
                  <template #default="scope">
                    <el-tag
                    :type="tagColor(scope.row.problemTags)"
                    disable-transitions
                    >{{ scope.row.problemTags }}</el-tag
                    >
                </template>
                </el-table-column>

                <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    size="small"
                    @click="questionDetail(scope.row.problemId)">刷题</el-button>
                </template>
              </el-table-column>

              </el-table>

              </el-row>
              <!-- 表格 -->


              </el-card>
              <div class="pagination">

                <el-pagination
                    @size-change="SizeChange"
                    @current-change="CurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
              </div>
            </el-main>
        </el-container>
        </el-container>
    </div>
</template>

<script>
import { reactive ,onMounted,ref, watch,provide, computed} from 'vue'
import {useRouter} from 'vue-router'
// 引入请求后台的方法
import Select from '../components/Select.vue'
import Pagechange from '../components/Pagechange.vue'
import API from '../api/question'
export default {
    name:'Drill',
    components:{Select,Pagechange},
    data(){
      return{
        index:0,
        listData:[],
        searchContent:'',
        categoryId:0,
        tagId:0,
        bigCategory:[
        ],
        tags:[],
        totalCount:0,
        currentPage:1,
        pageSize:10,
      }
  },

  mounted(){
      this.updateList()
    let token = localStorage.getItem('token')
    API.getCategories(token).then(res=>{
      this.bigCategory = res.data.content
    }).catch(e=>{
      console.log(e)
    })

  },
  methods:{
        tagColor(tag){
            if(tag==='hard')
            {
                return 'danger'
            }
            else if(tag==='easy')
            {
                return 'success'
            }
            else if(tag==='middle')
            {
                return 'warning'
            }
        },
        questionDetail(pid){

          let detail ={}
          detail.id = pid
          let token = localStorage.getItem('token')
          API.questionDetail(detail,token).then(res=>{
            LocalStorage.set(CURRENT_PROBLEM,res.data.content)
          }).then(res=>{
            this.$router.push({
              path:'/question',
              query: {
                questionCount:this.totalCount
              }
            })
          }).catch(e=>{
            console.log(e)
          })


        },
        CurrentChange(val){
          this.currentPage =val
          this.updateList()
        },
        SizeChange(val){
          this.pageSize = val
          this.updateList()
        },
        updateList(){
          let param = {}
          param.size = this.pageSize
          param.current = this.currentPage
          if(this.categoryId!==0){
            param.categoryId = this.categoryId
          }
          if(this.tagId!==0){
            param.tagId = this.tagId
          }
          let token = localStorage.getItem('token')
          API.questionList(param,token).then(res=>{
            this.listData = res.data.content.records
            this.totalCount = res.data.content.total
          }).catch(e=>{
            console.log(e)
          })


        },
        search(){
          let param = {}
          param.size = 10
          param.current = 1
          this.categoryId = 0
          this.tagId = 0
          param.keyword=this.searchContent
          // if(this.categoryId!==0){
          //   param.categoryId = this.categoryId
          // }
          // if(this.tagId!==0){
          //   param.tagId = this.tagId
          // }
          let token = localStorage.getItem('token')
          API.questionList(param,token).then(res=>{
            this.listData = res.data.content.records
            this.totalCount = res.data.content.total
          }).catch(e=>{
            console.log(e)
          })
        },
        searchByTag(tagId){
          this.tagId = tagId
          let param = {}
          param.size = this.pageSize
          param.current = this.currentPage
          param.tagId = tagId
          if(this.categoryId!==0){
            param.categoryId = this.categoryId
          }
          let token = localStorage.getItem('token')
          API.questionList(param,token).then(res=>{
            this.listData = res.data.content.records
            this.totalCount = res.data.content.total
          }).catch(e=>{
            console.log(e)
          })
        },
        searchByCategory(id,category){
          this.categoryId = category
          this.index = id
          let param = {}
          param.size = this.pageSize
          param.current = this.currentPage
          param.categoryId = category
          if(this.tagId!==0){
            param.tagId = this.tagId
          }
          let token = localStorage.getItem('token')
          API.questionList(param,token).then(res=>{
            this.listData = res.data.content.records
            this.totalCount = res.data.content.total
          }).catch(e=>{
            console.log(e)
          })
    },
        reset(){
          this.searchContent=''
          let param = {}
          param.size = 10
          param.current = 1
          this.categoryId = 0
          this.tagId = 0
          // if(this.categoryId!==0){
          //   param.categoryId = this.categoryId
          // }
          // if(this.tagId!==0){
          //   param.tagId = this.tagId
          // }
          let token = localStorage.getItem('token')
          API.questionList(param,token).then(res=>{
            this.listData = res.data.content.records
            this.totalCount = res.data.content.total
          }).catch(e=>{
            console.log(e)
          })
        },
      //
      // // 难度过滤第一次
      // // 发现难度改变
      // function ChangeLevel(val){
      //   // 过滤第一次
      //   if(val!=='all'){
      //     filterData1 = dataList.filter((element)=>{
      //     return element.tag === val
      //     })
      //     // 先将filterData修改得相同之后再改
      //     filterData2 = filterData1
      //     if(searchData.id!='')
      //     {
      //       SearchId()
      //     }
      //     updateTable(1)
      //   }
      //   else{
      //     filterData1 = dataList
      //     filterData2 = filterData1
      //     if(searchData.id!='')
      //     {
      //       SearchId()
      //     }
      //     updateTable(1)
      //   }
      // }
      // // 第二遍筛选查找题目
      // function SearchId(){
      //      filterData2 = filterData1.filter(element => {
      //      return (element.id.includes(searchData.value))||(element.name.toUpperCase().includes(searchData.value.toUpperCase()))
      //  })
      //  updateTable(1)
      // }
      // //根据分类搜索
      // function searchByCategory(category){
      //     if(category==='全部'){
      //       filterData2 = dataList
      //     }else {
      //       filterData2 = filterData1.filter(element => {
      //         return (element.category.toUpperCase().includes(category.toUpperCase()))
      //       })
      //     }
      //   updateTable(1)
      // }
      // // 更新表
      // function updateTable(val){
      //   tableData = []
      //   page.total = filterData2.length
      //   page.currentPage = val
      //   let i = (val-1)*page.pageSize
      //   let first = i
      //   let datalength = filterData2.length - first
      //   for(let j = 0;j<page.pageSize && j<datalength ;j++){
      //     tableData[j] = filterData2[i]
      //     i++
      //   }
      //   showData.showTable = tableData
      //   restarData()
      // }
      // // 在修改表后重置备用数据
      // function restarData(){
      //   filterData1 = resData.slice(0)
      //   tableData = resData.slice(0)
      //   dataList = resData.slice(0)
      // }
      // // 页面大小改变
      // function SizeChange(val){
      //   page.pageSize = val
      //   updateTable(1)
      // }
      // // 刷题
      // function toTest(){
      //   router.push({
      //     path:'/question',
      //     query:{
      //       id:1001
      //     }})
      // }
  }


  // setup(){
    //     onMounted(()=>{
    //       updateTable(1)

    //
    //       // API.questionDetail(detail,token).then(res=>{
    //       //
    //       // }).catch(e=>{
    //       //   console.log(e)
    //       // })
    //
    //     })
    //     const router = useRouter()
    //     let searchData = ref('')
    //     const resData = []
    //     const bigCategory = reactive([
    //         {id:'0000',title:'全部'},
    //         {id:'0001',title:'树算法'},
    //         {id:'0002',title:'栈算法'},
    //         {id:'0003',title:'堆算法'},
    //         {id:'0004',title:'数组'},
    //         {id:'0005',title:'数据结构'},
    //     ])
    //     // 这是全部的数据
    //     let dataList = resData.slice(0)
    //     // 输出数据
    //     let tableData = resData.slice(0)
    //
    //     const showData = reactive({
    //       showTable : []
    //     })
    //     let page = reactive({
    //         total:100,
    //         pageSize:10,
    //         currentPage:1
    //     })
    //     // 用于筛选的过程变量
    //     let filterData1 = resData.slice(0)
    //     let filterData2 = resData.slice(0)
    //     // 上色tag
    //     function tagColor(tag){
    //         if(tag==='hard')
    //         {
    //             return 'danger'
    //         }
    //         else if(tag==='easy')
    //         {
    //             return 'success'
    //         }
    //         else if(tag==='middle')
    //         {
    //             return 'warning'
    //         }
    //     }
    //     function CurrentChange(val){
    //     console.log('val--页码',val)
    //     updateTable(val)
    //     }
    //
    //   // 难度过滤第一次
    //   // 发现难度改变
    //   function ChangeLevel(val){
    //     // 过滤第一次
    //     if(val!=='all'){
    //       filterData1 = dataList.filter((element)=>{
    //       return element.tag === val
    //       })
    //       // 先将filterData修改得相同之后再改
    //       filterData2 = filterData1
    //       if(searchData.id!='')
    //       {
    //         SearchId()
    //       }
    //       updateTable(1)
    //     }
    //     else{
    //       filterData1 = dataList
    //       filterData2 = filterData1
    //       if(searchData.id!='')
    //       {
    //         SearchId()
    //       }
    //       updateTable(1)
    //     }
    //   }
    //   // 第二遍筛选查找题目
    //   function SearchId(){
    //        filterData2 = filterData1.filter(element => {
    //        return (element.id.includes(searchData.value))||(element.name.toUpperCase().includes(searchData.value.toUpperCase()))
    //    })
    //    updateTable(1)
    //   }
    //   //根据分类搜索
    //   function searchByCategory(category){
    //       if(category==='全部'){
    //         filterData2 = dataList
    //       }else {
    //         filterData2 = filterData1.filter(element => {
    //           return (element.category.toUpperCase().includes(category.toUpperCase()))
    //         })
    //       }
    //     updateTable(1)
    //   }
    //   // 更新表
    //   function updateTable(val){
    //     tableData = []
    //     page.total = filterData2.length
    //     page.currentPage = val
    //     let i = (val-1)*page.pageSize
    //     let first = i
    //     let datalength = filterData2.length - first
    //     for(let j = 0;j<page.pageSize && j<datalength ;j++){
    //       tableData[j] = filterData2[i]
    //       i++
    //     }
    //     showData.showTable = tableData
    //     restarData()
    //   }
    //   // 在修改表后重置备用数据
    //   function restarData(){
    //     filterData1 = resData.slice(0)
    //     tableData = resData.slice(0)
    //     dataList = resData.slice(0)
    //   }
    //   // 页面大小改变
    //   function SizeChange(val){
    //     page.pageSize = val
    //     updateTable(1)
    //   }
    //   // 刷题
    //   function toTest(){
    //     router.push({
    //       path:'/question',
    //       query:{
    //         id:1001
    //       }})
    //   }
    //
    //     return{
    //         searchData,
    //         bigCategory,
    //         tagColor,
    //         CurrentChange,
    //         ChangeLevel,
    //         showData,
    //         SizeChange,
    //         SearchId,
    //         page,
    //         searchByCategory,
    //         toTest
    //     }
    // },
    // provide(){
    //   return {page : this.page}
    // }
    
  }
</script>

<style scoped>
.red{
  background: red;
}
 .el-header {
    background-color: #ffffff;
    color: #333;
    line-height: 60px;
    
  }
  
  .el-aside {
    color: #333;
  }

  .el-row {
    margin-bottom: 20px;
    background-color: #ffffff;

  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #ffffff;
  }
  .pagination{
    margin: 10px;
  }
  .question{
    margin-left: 20%;
    margin-right: 20%;
  }
 </style>